<template>
  <main>
    <el-button type="primary" @click="initData">开始</el-button>
    <el-divider />
    <el-space wrap>
      <template v-for="(item_arr, indexY) in data_arr">
        <el-card
          v-for="(cell, indexX) in item_arr"
          :key="cell"
          class="card"
          @mousedown="handleClick"
        >
          <div class="card-box">
            <div
              v-if="!cell.clicked"
              class="card-box-shade"
              :data-x="indexX"
              :data-y="indexY"
            ></div>
            <div
              class="card-box-text"
              v-if="cell.num > 0 && cell.num < 9"
              :data-x="indexX"
              :data-y="indexY"
            >
              {{ cell.num }}
            </div>
            <div
              class="card-box-text lei"
              v-else-if="cell.num === 9"
              :data-x="indexX"
              :data-y="indexY"
            ></div>
            <div class="card-box-text" v-else :data-x="indexX" :data-y="indexY"></div>
          </div>
        </el-card>
      </template>
    </el-space>
  </main>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
const data_arr = ref([])
let flag = ref(false)
// 默认随机10个雷
const getRandomNums = (num = 10) => {
  return Array(num)
    .fill()
    .map(() => Math.floor(Math.random() * 10) + 1)
}
// 赋值
const getNum = (y, x) => {
  if (data_arr.value[y] && data_arr.value[y][x]) {
    if (data_arr.value[y][x].num < 9) {
      data_arr.value[y][x].num++
    }
  }
}
// 加数字
const addNear = (y, x) => {
  // 上左
  getNum(y - 1, x - 1)
  // 上中
  getNum(y - 1, x)
  // 上右
  getNum(y - 1, x + 1)
  // 中左
  getNum(y, x - 1)
  // 中右
  getNum(y, x + 1)
  // 下左
  getNum(y + 1, x - 1)
  // 下中
  getNum(y + 1, x)
  // 下右
  getNum(y + 1, x + 1)
}
// 初始化
const initData = () => {
  flag.value = true
  const data = createData(10, createData())
  data_arr.value = JSON.parse(JSON.stringify(data))
  // 随机10个雷
  const xNums = getRandomNums()
  const yNums = getRandomNums()
  data_arr.value.forEach((cell, index) => {
    data_arr.value[yNums[index] - 1][xNums[index] - 1].num = 9
  })
  // 给雷边空格上加数字
  data_arr.value.forEach((itemY, indexY) => {
    itemY.forEach((itemX, indexX) => {
      if (itemX.num === 9) {
        addNear(indexY, indexX)
      }
    })
  })
}
// 点击方框
const handleClick = (event) => {
  if (!flag.value) {
    return false
  }
  // 左键
  if (event.button === 0) {
    const dataset = event.target.dataset
    const x = Number(dataset.x)
    const y = Number(dataset.y)
    if (data_arr.value[y][x].num === 9) {
      data_arr.value[y][x].clicked = true
      flag.value = false
      openMessage('游戏结束')
    } else {
      openShade(y, x)
    }
  }
  // 右键
  // if (event.button === 2) {
  // }
}
// 打开格子
const openNear = (y, x) => {
  if (data_arr.value[y] && data_arr.value[y][x]) {
    if (data_arr.value[y][x].num === 0) {
      if (!data_arr.value[y][x].clicked) {
        openShade(y, x)
      }
    }
  }
}
// 上下左右为0的点击时候一起打开
const openShade = (y, x) => {
  data_arr.value[y][x].clicked = true
  // 上
  openNear(y - 1, x)
  // 左
  openNear(y, x - 1)
  // 下
  openNear(y + 1, x)
  // 右
  openNear(y, x + 1)
}
// 提示框
const openMessage = (msg) => {
  ElMessageBox.alert(msg, '提示', {
    confirmButtonText: '确定'
  })
}
//生成数据
const createData = (num = 10, data = { num: 0, clicked: false }) => {
  return Array(num).fill(data)
}
onMounted(() => {
  initData()
  // contextmenu 禁用右键菜单
  document.addEventListener('contextmenu', function (e) {
    e.preventDefault()
  })
})
</script>
<style lang="scss" scoped>
main {
  width: 600px;
  height: 600px;
}
.card {
  width: 50px;
  height: 50px;
  cursor: pointer;
  &-box {
    width: 50px;
    height: 50px;
    &-shade {
      width: 50px;
      height: 50px;
      background: #606266;
    }
    &-text {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
    }
  }
}
.lei {
  background: #ff4d4f;
}
</style>
